<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论排行榜</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/echarts/echarts.js"></script>
    <link rel="stylesheet" href="/css/statistics/comment-statistics.css">
</head>
<body>
<div class="layui-row layui-col-md12" id="box-top">
    <div class="layui-elem-quote layui-col-md12" >
        <span class="layui-col-md1">人员统计</span>
        <div  class="layui-col-md9"></div>
        <div style="float: right;" class="layui-col-md2">
            <button class="layui-btn layui-icon layui-icon-refresh-1" id="shuaxin"> 刷新</button>
            <button class="layui-btn layui-icon layui-icon-return" id="goBack"> 返回</button>
        </div>
    </div>
</div>
<div class="layui-row layui-col-md12" style="margin-left:10px;">
    <div style="float: left;" class="layui-col-md2">
        <button class="layui-btn" id="qianduan">前端用户</button>
        <button class="layui-btn" id="guanli">后台用户</button>
    </div>
    <div style="float: right;" class="layui-col-md10"></div>
</div>
<div class="layui-row layui-col-md12" style="padding-top:20px;">
    <h2 style="padding-left: 10px"><span class="layui-icon layui-icon-friends"></span> 评论统计排行榜</h2>
</div>
<div class="layui-row layui-col-md12">
    <table class="layui-table" id="box">
        <tr id="title">
            <td class='commentHeader'>评论类型</td>
            <td>课程评论</td>
            <td>商品评论</td>
            <td>微圈评论</td>
        </tr>
        <tr id="sum"></tr>
    </table>
</div>
<div class="layui-row layui-col-md12">
    <h2 style="padding-left: 10px" class="layui-back"><span class="layui-icon layui-icon-chart-screen"></span> 评论统计排行榜</h2>
</div>
<div class="layui-row col-sm-12 col-md-12 col-lg-12">
    <div id="main" style="width: 100%;height: 500px;padding-top:40px;"></div>
</div>
</div>
</body>
<script>

    //显示
    function show(elementId) {
        var obj1 = document.getElementById(elementId);
        obj1.style.backgroundColor="#2F4056";
        obj1.style.color="#FFFFFF";
    };
    //不显示
    function end(elementId) {
        var obj2 = document.getElementById(elementId);
        obj2.style.backgroundColor="#FFFFFF";
        obj2.style.color="#666666";
        obj2.style.border="1px solid #D2D2D2";
    };
    show("qianduan");
    end("guanli");

    //前端用户
    $("#qianduan").click(function () {
        show("qianduan");
        end("guanli");
        selectComment(1);
    });
    //后台用户
    $("#guanli").click(function () {
        end("qianduan");
        show("guanli");
        selectComment(2);
    });
    selectComment(1);
    //查询用户的评论（商品、微圈、视频）
    function selectComment(userType){
        $.ajax({
            type:"post",
            dataType:"json",
            data:{"userType":userType},
            url:"/commentStatistics/countBeforeAll",
            success:function (data) {
                $("#sum").empty();
                $("#sum").append(
                    "<td class='commentHeader'>"+'评论数量'+"</td>"+
                    "<td>"+data.data.countJsCourse+"</td>"+
                    "<td>"+data.data.countProduct+"</td>"+
                    "<td>"+data.data.countJsMicrocircle+"</td>"
                );
                var type = new Array("课程评论数量","商品评论数量","微圈品论数量");
                var count = new Array(data.data.countJsCourse,data.data.countProduct,data.data.countJsMicrocircle);
                echart(type,count,'各类型评论总量');
            }
        })
    }




    var myChar = echarts.init(document.getElementById('main'));
    function echart(type, count, name) {
        var option = {
            //标题
            title: {
                text: '评论统计图',//主标题
                subtext: '思云产品'//副标题
            },
            //图例位置
            legend: {
                show: true
            },

            //右上角工具栏
            toolbox: {
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['line', 'bar']
                    },
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            //提示框
            tooltip: {},
            //y轴
            yAxis: {
                type: 'value',
                position: 'left',
            },
            xAxis: {
                data: type
            },
            series: [
                {
                    //名称，提示框tooltip会显示
                    name: name,
                    //决定这的图表是什么类型的
                    type: 'bar',
                    data: count,
                    markPoint: {
                        data: [
                            {type: 'max', name: 'Max'},
                            {type: 'min', name: 'Min'}
                        ]
                    }
                }
            ]
        }
        //使用指定的配置项和数据显示图表
        myChar.setOption(option);
    }

    //刷新
    $('#shuaxin').click(function () {
        location.reload();
    });

    //返回
    $("#goBack").click(function (s) {
        parent.$('#Jump').val('首页');
        parent.getQuick();
        return;
    });

</script>
</html>